<template>
  <div class="headbox">
    <div class="left">
      <el-icon style="font-size: 30px" @click="collapse" class="custom-hover"><Operation /></el-icon>
      <breadcrumb style="margin-left: 20px"></breadcrumb>
    </div>
    <div class="right">
      <div>
        <el-dropdown trigger="click" class="custom-hover">
          <div class="flex items-center">
            <img src="@/assets/avatar.jpg" alt="" class="log" />
            <!-- <span style="font-size: 14px;padding-left: 5px;padding-right: 10px;color:inherit">Archer</span> -->
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="changePassWord">修改密码</el-dropdown-item>
              <el-dropdown-item @click="closeLogin">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div style="margin-right: 20px">
        <!-- <el-input
          v-if="inputVisible"
          ref="InputRef"
          v-model="inputValue"
          class="w-50 m-2"
          size="small"
          @keyup.enter="handleInputConfirm"
          @blur="handleInputConfirm"
        /> -->
        <el-autocomplete
          v-if="inputVisible"
          v-model="inputValue"
          :fetch-suggestions="querySearch"
          ref="InputRef"
          clearable
          size="small"
          class="inline-input w-50"
          :trigger-on-focus="false"
          @keyup.enter="handleInputConfirm"
          @blur="handleInputConfirm"
          @select="handleSelect"
        />
        <el-button v-else :icon="Search" circle @click="showInput" />
      </div>
      <div style="margin-right: 20px">
        <el-badge :value="12" class="item">
          <el-button class="share-button" :icon="Bell" circle />
        </el-badge>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div>
      <el-tag
        v-for="(item, key) in keepAlive.dynamicTags"
        :key="key"
        class="mx-1 custom-hover bootmRight"
        size="large"
        :closable="getClosable(item, key)"
        :type="item.type"
        :disable-transitions="true"
        @click="tagClick(item, key)"
        @close="tagClose(item, key)"
      >
        {{ item.name }}
      </el-tag>
    </div>
    <div>
      <el-tag
        class="mx-1 custom-hover bootmRight"
        size="large"
        :disable-transitions="true"
        @click="closeAll()"
      >
      关闭全部
      </el-tag>
    </div>
  </div>
  <el-dialog v-model="changePassWordVis" title="修改密码" draggable width="20%">
    <table-where :forms="editForms"></table-where>
  </el-dialog>
</template>
<script setup>
import { reactive, ref, nextTick } from 'vue'
import breadcrumb from './breadcrumb.vue'
import { Search, Bell } from '@element-plus/icons-vue'
import { useKeepAlive } from '@/store/keepAlive'
import { useRouter } from 'vue-router'
import { ElAutocomplete } from 'element-plus'
import { useWmsGlobal } from '@/store/wmsGlobal'
import { Encrypt } from '@/components/utils/api'
import { POSTJSON } from '@/components/utils/http'
const wmsGlobal = useWmsGlobal()
const changePassWordVis = ref(false);
let menuMap
setTimeout(() => {
  menuMap = wmsGlobal.menuData.map(item => {
    return item.menu_level === 0 && { value: item.menu_name, path: item.url }
  })
}, 4000)

const router = useRouter()
const handleSelect = current => {
  router.push(current.path)
}

const keepAlive = useKeepAlive()
const props = defineProps({
  collapse: Function
})
function getCookie(name) {
  let value = "";
  let cookies = document.cookie.split("; ");
  for (let i = 0; i < cookies.length; i++) {
    let arr = cookies[i].split("=");
    if (arr[0] === name) {
      value = arr[1];
    }
  }
  return value;
}
const e_id = getCookie("account");
const editForms = reactive({
  data: {},
  compValue: [
    { label: '新密码', value: 'password',type: 'input', show: true},
    {
      label: '确认',
      type: 'button',
      onclick: () => {
        const pw = Encrypt(editForms.data.password.trim())
        POSTJSON('/Login/addLogin', {id:e_id,ep_password:pw}).then(data => {
          if (data.code ===200){
            wmsGlobal.isLogin = false;
          }
        })
      }
    },
  ]
})
const inputVisible = ref(false)
const searchValue = ref()
const InputRef = ref()
const inputValue = ref()
const collapse = props.collapse
const handleInputConfirm = () => {
  // if (inputValue.value) {
  //   keepAlive.dynamicTags.push({ name: inputValue.value, value: "15", type: "info" });
  // }
  inputVisible.value = false
  inputValue.value = ''
}
const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value.focus()
  })
}
const querySearch = (queryString, cb) => {
  const results = menuMap.filter(item => {
    return item.value && item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
  })

  cb(results)
}
const tagClick = row => {
  router.push(row.path)
}
const tagClose = (row, key) => {
  router.push(keepAlive.dynamicTags[key - 1].path)
  keepAlive.dynamicTags.splice(key, 1)
  keepAlive.removeCachesByName(row.name)
}
const closeAll =()=>{
  keepAlive.dynamicTags.splice(1,keepAlive.dynamicTags.length - 1)
  keepAlive.caches.splice(0,keepAlive.caches.length);
  router.push('/')
  
}
const getClosable = row => {
  if (row.path === '/') {
    return false
  } else {
    return true
  }
}
const closeLogin = ()=>{
  wmsGlobal.isLogin = false;
}
const changePassWord = ()=>{
  changePassWordVis.value = true;
}
</script>


<style lang="scss" scoped>
.headbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  .left {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .right {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin-right: 10px;
  }
}
.bottom {
  height: 40px;
  //  line-height:55px;
  // box-shadow: var(--el-box-shadow-light);
  // background-color: #f2f3f5;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:space-between;
  border-top: 1px solid #f2f3f5;
  width: 100%;
  .bootmRight {
    right: 0px;
  }
}
.log {
  border-radius: 50%;
  width: calc(25px);
}
</style>